<template>
    <div>
        <el-row>
            <el-col :span="8">
                <div class="nav">合同管理 / 承运商合同 / 合同导入</div>
            </el-col>
        </el-row>

        <el-row>
            <div class="content">
                <div class="content-1" style="background: #F5F5F5;">
                    <el-row :gutter="40">
                        <el-col :span="10" :offset="7">
                            <div class="content-peal">
                                <div class="content-top">合同导入</div>
                                <el-form ref="form" :model="form1" label-width="120px">
                                    <el-form-item label="录入员:">
                                        打怪兽
                                    </el-form-item>
                                    <el-form-item label="工号:">
                                        0202020
                                    </el-form-item>
                                    <el-form-item label="合约编号:">
                                        <el-input></el-input>
                                    </el-form-item>
                                    <el-form-item label="承运商名称:">
                                        <el-input></el-input>
                                    </el-form-item>
                                    <el-form-item label="保证金额:">
                                        <el-input></el-input>
                                    </el-form-item>
                                    <el-form-item label="结算方式:" v-model="form1.selected">
                                        <el-select style="width:100%;">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="合约起始时间:">
                                        <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        placeholder="合约起始时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="合约结算时间:">
                                        <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        placeholder="合约结算时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="合约类型:" v-model="form1.selected">
                                        <el-select style="width:100%;">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="合同上传:">
                                        <el-upload
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                        </el-upload>
                                        <el-dialog :visible.sync="dialogVisible" size="tiny">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </el-form-item>
                                    <el-form-item label="附件上传:">
                                        <el-upload
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                        </el-upload>
                                        <el-dialog :visible.sync="dialogVisible" size="tiny">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </el-form-item>
                                </el-form>
                                <div style="text-align:center;"><button class="button" style="border-radius:21px;">保存</button></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-row>
    </div>
</template>
<script>

export default {

    data () {

        return {
            form:{
                selected:''
            },
            value1:'',
            form1:{
                selected:''
            },
            dialogImageUrl: '',
            dialogVisible: false
        }
    },

    mounted () {

        
        
    },

    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
 
    }
}
</script>
<style>
.content-peal{
    font-size:20px;
    padding:45px 15px;
    background:#fff;
    border-radius: 10px;
}
.content-peal > .content-top{
    text-align: center;
    color:#4C4C4C;
}
.content-peal .el-input__inner{
    border:none;
}
.el-form-item{
    border-bottom:1px solid #EEEEEE;
    
}
</style>
